<template>
	<view class="page-base" :style="$theme.pageStyle">

		<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
			title="详情">
			<view class="preview" slot="center">详情</view>
		</z-nav-bar>

		<view class="top">
			<view class="banner">
				<u-swiper :list="GoodsInfo.goods_image" @change="e => currentNum = e.current" :autoplay="false"
					indicatorStyle="right: 20px" :height="SweipeHeight" radius="0">
					<view slot="indicator" class="indicator-num">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{ GoodsInfo.goods_image.length }}</text>
					</view>
				</u-swiper>
			</view>
		</view>
		
		<view class="activity-card rd-t-40rpx relative w-full h-152 flex justify-between">
			<view class="flex items-baseline text--w111-fff mt-8 base-money">
				<text class="fs-28 fw-600 lh-40rpx pr-16">售价</text>
				<text class="symbol" style="color: rgb(255, 255, 255);font-family: SemiBold;">￥</text>
				<text class="integer" style="font-size: 29px;">{{ price }}</text>
			</view>
		</view>
		
		<view class="info_card rd-40rpx relative" style="margin-top: -37px;">
			<view class="guige">
				<view class="guige_top">
					<view class="guige_top_left">
						服务规格
					</view>
					<view class="guige_top_right">
			
					</view>
				</view>
			
				<view class="row-type flex-sb" style="margin-top: 12px;">
			
					<block v-for="(item,index) in Equity" :key="index">
						<view class="card-type flex-fs color-base" :class="{ 'card-type-active': sleck == index }"
							@click="tab(index)">
							<view>
								<view class="text-30 bold">{{item.name}}</view>
								<view class="text-24 color-base-minor">有效期 {{item.timeend}} 天</view>
							</view>
							<!-- <image class="img-back-person" src="@/static/ImgBackPerson.png"></image> -->
							<uni-icons class="icon-checkbox flex-ct" type="checkbox-filled" size="18"
								color="#3277FF"></uni-icons>
						</view>
					</block>
			
				</view>
			
			</view>
			
		</view>

	

		<view class="guige">
			<view class="guige_top">
				<view class="guige_top_left">
					权益明细
				</view>
				<view class="guige_top_right">
				</view>
			</view>

			<cl-cell-group style="padding: 0;">
				<block v-for="(item,index) in sEquity.list" :key="index">
					<cl-cell icon='checkbox' :title="item.name" checkbox :value="item.number" :border="false" :isLink="false"
						style="padding-left:0px"></cl-cell>
				</block>
			</cl-cell-group>
		</view>

		<!-- <view class="guige">
			<view class="guige_top">
				<view class="guige_top_left">
					用户评价
				</view>
				<view class="guige_top_right">
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
			<block v-if="replyCount">
				<scroll-view ref="scroll" scroll-x="true" class="scroll w-690 mt-24 pl-20" show-scrollbar="true"
					@scroll="scroll">
					<view id="scrollBox" ref="scrollBox" class="scrll-box">
						<view class="inline-block mr-20" v-for="item in reply" :key="item.id"
							@click.stop="details(item)">
							<view class="h-192 rd-16rpx bg--w111-f5f5f5 flex justify-between">
								<view class="flex-1 p-24">
									<view class="flex-y-center">
										<image class="w-64 h-64 rd-50-p111-" :src="item.avatar" mode="aspectFill">
										</image>
										<view class="flex-col pl-16">
											<text class="text--w111-333 fs-24">{{ item.nickname }}</text>
											<view class="flex">
												<text class="iconfont icon-ic_star1 fs-18 text-primary-con"
													v-for="star in Number(item.star)" :key="star"></text>
											</view>
										</view>
									</view>
									<view class="w-324 mt-12 text--w111-333 fs-24 break_word line2">{{ item.comment }}
									</view>
								</view>
								<image v-if="item.pics.length" class="w-192 h-192 rd-16rpx" :src="item.pics[0]"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex-center mt-24" v-if="reply.length > 1">
					<view class="w-64 h-6 rd-3px bg--w111-eee scrpll-l">
						<view class="w-32 h-6 rd-3px scrpll-line" :style="{ left: srollLeft + '%' }"></view>
					</view>
				</view>
			</block>
		</view> -->


		<view class="guige">
			<view class="guige_top">
				<view class="guige_top_left">
					服务详情
				</view>
				<view class="guige_top_right">
				</view>
			</view>

			<view class="desc" style="border-radius: 15px;width: 100%;">
				<u-parse :content="GoodsInfo.content"></u-parse>
			</view>
		</view>



		<view class="btn_box">
			<view class="btn_box_gwc" @click="ToCar()">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/211699894461q92vCT.png" />
				<text class="btn_box_gwc_text">购物车</text>
			</view>
			<button class="btn_box_kf" open-type="contact">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/461699894426XgICJK.png" />
				<text class="btn_box_kf_text">客服</text>
			</button>
			<view class="btn_right" @click="ShowPay()">
				<text>立即购买 ( {{ price }} )</text>
			</view>
		</view>
		
		
		<!-- 支付pop -->
		<u-popup :show="paypop" mode="bottom" :round="15" @close="closespaypop" @open="openpaypop">
			<view style="padding-bottom: 30rpx;height: 350px;" class="showbottom">
				<view class="pay-type-list">
					<view class="pay-title">请选择支付方式：</view>
					<radio-group class="uni-flex" name="gender">
						<block v-for="(item, index) in payList" :key="index">
							<view class="type-item" :class="{ 'act': index === selectedIndex }"
								@click="selectNav(item,index)">
								<image :src="item.icon" mode="" class="a-img"></image>
								<view class="con">
									<text class="tit">{{item.pay_way_name}}</text>
								</view>
							</view>
						</block>
					</radio-group>
				</view>
				<view class="botton" @click="ToBuy()">
					<text class="text110">确认支付</text>
				</view>
			</view>
		</u-popup>

		<view class="zhanwei" style="height: 80px;">

		</view>

	</view>
</template>

<script>
	import $H from '@/common/js/request.js';

	export default {
		data() {
			return {
				srollLeft: 0, // 距离左边
				srollBoxWidth: 0, //内部宽度
				boxWidth: 0, //容器宽度
				scrollTop: 0,
				form: {
					type: 0, // 套餐类型 0个人套餐,1企业套餐
					total: 0,
					share: 1, // 购买份数
					openId: '',
				},
				SweipeHeight: uni.getStorageSync('screenHeight'),
				GoodsInfo: {},
				Equity: [],
				sEquity: [],
				sleck: 0,
				price:0,
				paypop: false,
				payList: uni.getStorageSync('pay'),
				Payinfo: {},
				pay_way: 1,
				selectedIndex: 10,
				coupon_id:0
				
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getGoodsDetail()
		},
		methods: {
			closespaypop() {
				this.paypop = false
			},
			openpaypop() {},
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
			},
			ShowPay() {
				this.paypop = true
			},
			tab(index) {
				this.sleck = index
				this.sEquity = this.Equity[index]
				this.price = this.sEquity.price
			},
			scroll(e) {
				this.srollLeft = ((e.detail.scrollLeft / (this.srollBoxWidth - this.boxWidth)) * 100).toFixed(0) / 2;
			},
			getGoodsDetail() {
				$H.post('service/Equitydetail', {
					id: 1
				}, {
					token: true
				}).then(res => {
					this.GoodsInfo = res.data
					//加载规格
					this.Equity = res.data.equity
					//处理选中规格
					this.sleck = 0
					this.sEquity = this.Equity[0]
					this.price = this.sEquity.price
					console.log(this.GoodsInfo)
				})
			},
			async ToBuy() {
				try {
					const res = await $H.post('order/CreateServicePackageOrder', {
						id: 1, // 普通订单
						pay_way: this.pay_way,
						coupon_id: this.coupon_id,
						sleck:this.sleck
					}, {
						token: true
					});
					this.paypop = false
					if (res.code == 1) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/order/service_package/index'
								})
							}, 400)
						} else if (res.data.code == 2) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							// this.paypop = false
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								appId: res.data.config.appId,
								timeStamp: res.data.config.timeStamp,
								nonceStr: res.data.config.nonceStr,
								package: res.data.config.package,
								signType: res.data.config.signType,
								paySign: res.data.config.paySign,
								success: function(res) {
									//跳转到会话页面
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/service_package/index'
										})
									}, 400)
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									});
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
			
			
				} catch (error) {
			
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	
	@import '@/static/css/unocss.css';
	
	.showbottom {
		padding: 20px;
	}
	
	.container-card {
		margin-top: 32rpx;
		box-sizing: border-box;
		padding: 32rpx;
		width: 686rpx;
		background: #ffffff;
		border-radius: 12rpx;
	}

	.box-infomation {
		margin-top: 20rpx;

		br {
			margin: 20rpx 0;
		}
	}

	.title {
		margin-top: 8rpx;
		margin-bottom: 40rpx;
	}

	.row-type {
		// margin: 0 auto;
		// margin-bottom: 8rpx;
		// width: 550rpx;

		.card-type {
			box-sizing: border-box;
			position: relative;
			padding-left: 28rpx;
			width: 48%;
			height: 170rpx;
			background: #f5f5f5;
			border-radius: 12rpx;

			&::after {
				content: '';
			}
		}

		.text-30 {
			margin-bottom: 8rpx;
		}

		.card-type-active {
			box-shadow: 0 0 0 1px $uni-color-primary;
			background: #e6eeff;
			color: $uni-color-primary;

			.icon-checkbox {
				display: flex;
			}
		}

		.icon-checkbox {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			display: none;
			width: 24rpx;
			height: 24rpx;
		}

		.img-back-person {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			width: 69rpx;
			height: 78rpx;
		}

		.img-back-enterprise {
			position: absolute;
			right: 16rpx;
			bottom: 20rpx;
			width: 82rpx;
			height: 77rpx;
		}
	}

	.row {
		height: 100rpx;
		border-bottom: 1px solid #e6e6e6;

		.number-box {
			box-sizing: border-box;
			overflow: hidden;
			height: 60rpx;
			border: 1px solid $uni-color-primary;
			border-radius: 12rpx;
			background-color: $uni-color-primary;

			.number-box-input {
				height: 100%;
				width: 100rpx;
				border-color: $uni-color-primary;
				border-style: solid;
				border-left-width: 1px;
				border-right-width: 1px;
				text-align: center;
			}

			.number-box__subtract,
			.number-box__add {
				position: relative;
				width: 60rpx;
				height: 100%;
			}

			.number-box__add::after {
				content: '';
				width: 15rpx;
				height: 1px;
				background-color: #fff;
			}

			.number-box__add::before {
				position: absolute;
				content: '';
				width: 1px;
				height: 15rpx;
				background-color: #fff;
			}

			.number-box__subtract::after {
				content: '';
				width: 15rpx;
				height: 1px;
				background-color: #333;
			}

			.number-box-input,
			.number-box__subtract {
				background: #fff;
			}
		}

		.key {
			margin-right: 24rpx;
		}

		&:last-child {
			border-bottom: none;
		}
	}

	.btn-box {
		width: 686rpx;
		margin-top: 60rpx;
	}

	.btn-primary,
	.btn-vice {
		width: 324rpx;
		height: 88rpx;
		border-radius: 8rpx;
	}

	.decorate {
		margin: 0 24rpx;
		width: 38rpx;

		&-big {
			width: 14rpx;
			height: 26rpx;
			background: linear-gradient(180deg, #ffffff 0%, #3277ff 100%);
			border-radius: 26rpx;
			transform: rotate(38deg);
		}

		&-small {
			width: 10rpx;
			height: 19rpx;
			background: linear-gradient(180deg, #3277ff 0%, #ffffff 100%);
			border-radius: 19rpx;
			transform: rotate(38deg);
		}
	}

	.flex-fs {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-ct {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.guige {
		margin: 15px;
		padding: 10px;
		background: #fff;
		border-radius: 8px;

		& .guige_top {
			padding: 5px;
			display: flex;
			justify-content: space-between;

			& .guige_top_left {
				color: #000;
				font-weight: bold;
				font-size: 18px;
			}

			& .guige_top_right {
				// 样式
			}
		}

		& .guige_btn {
			padding: 5px;
			display: flex;
			justify-content: space-between;

			& .guige_btn_text {
				color: #393939;
				font-size: 16px;
			}
		}
	}

	.btn_box {
		bottom: 0;
		position: fixed;
		display: flex;
		width: 100%;
		height: 55px;
		padding-left: 5%;
		background-color: #fff;

		& .btn_box_gwc {
			display: grid;
			width: 15%;
			align-content: center;
			text-align: center;
			justify-content: center;

			& image {
				width: 25px;
				height: 25px;
			}

			& .btn_box_gwc_text {
				color: #666666;
				font-size: 12px;
			}
		}

		& .btn_box_kf {
			display: grid;
			width: 15%;
			align-content: center;
			text-align: center;
			justify-content: center;

			& image {
				width: 25px;
				height: 25px;
			}

			& .btn_box_kf_text {
				color: #666666;
				font-size: 12px;
			}
		}

		& .btn_left {
			width: 30%;
			height: 45px;
			background: #323232;
			border-radius: 12px 0px 0px 12px;
			text-align: center;
			margin-top: 5px;
			margin-left: 10px;

			& text {
				text-align: center;
				font-size: 16px;
				line-height: 45px;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		& .btn_right {
			width: 65%;
			height: 45px;
			background: #01C2C3;
			border-radius: 12px 12px 12px 12px;
			text-align: center;
			margin-top: 5px;

			& text {
				text-align: center;
				font-size: 16px;
				line-height: 45px;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	button {
		border: 0;
		background-color: transparent;
		outline: none;
		line-height: normal;
		margin: 0;
		padding: 0;
	}

	button::after {
		border: none;
		width: 0;
		height: 0;
	}
	
	.pay-type-list {
		// margin: 15px;
		margin-bottom: 10px;
	
		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}
	
		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;
	
			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}
	
		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}
	
		.icon {
			width: 100upx;
			font-size: 52upx;
		}
	
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
	
		.icon-weixinzhifu {
			color: #36cb59;
		}
	
		.icon-alipay {
			color: #01aaef;
		}
	
		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}
	
		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}
	
	.act {
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}
	
	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}
	
	
	.botton {
		bottom: 20px;
		position: fixed;
		width: 90%;
		border-radius: 44rpx;
		background-color: var(--color-primary);
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	
	.activity-card {
		margin-top: -34rpx;
		background-image: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/121714142952EinwhM.png');
		background-size: cover;
		background-repeat: no-repeat;
		padding: 16rpx 40rpx 0 40rpx;
	}
	
	.info_card {
		background: linear-gradient(180deg, #ffffff 0%, #ffffff 54%, rgba(255, 255, 255, 0) 100%);
		margin-top: -32rpx;
	}
	
	.base-money {
		display: inline-block;
		&.line {
			text-decoration: line-through;
		}
	
		&.weight {
			font-weight: 500;
		}
		
		.integer{
			font-family: "SemiBold";
		}
	}

	
	
</style>